<template>
	<view class="question" @click="toDetail">
		<view class="flex alignCenter queHeader justConBetween" @click.stop="toHomePage">
			<view class="flex alignCenter">
				<view class="avatar">
					<image :src="quesItem.createUserAvatar?quesItem.createUserAvatar:'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix">
					</image>
					<view class="q-icons flex alignCenter" v-if="quesItem.type==1 ||quesItem.type==7">
						<text>Q</text>
					</view>
					<view class="A-icons flex alignCenter" v-if="quesItem.type==2">
						<text>A</text>
					</view>
					<view class="b-icons" v-if="quesItem.type==5">
						<image src="../../static/image/icons/biji.png" mode=""></image>
					</view>
				</view>
				<view class="">
					<view class="font14 bold userName">{{quesItem.createUserName?quesItem.createUserName:'匿名用户'}}</view>
					<view class="font12 flex alignCenter">
						<view class="">
							<text class="color999 u-m-r-10">{{quesItem.createTime}}</text>
							<text class="colorccc" v-if="quesItem.type==1">提出了问题</text>
							<text class="colorccc" v-if="quesItem.type==2">回答了问题</text>
							<text class="colorccc" v-if="quesItem.type==3">小组动态</text>
							<text class="colorccc" v-if="quesItem.type==4">活动提问</text>
							<text class="colorccc" v-if="quesItem.type==5">发布了笔记</text>
							<text class="colorccc" v-if="quesItem.type==6">任务提问</text>
							<text class="colorccc" v-if="quesItem.type==7">向学长学姐提问</text>
						</view>
					</view>
				</view>
			</view>
			<view class="focus bold font12" v-if="(!quesItemOne.isLikedUser && !isMine && canFocus)" @click.stop="focusClick">
				<text class="focusMargin">+</text>关注</view>
		</view>
		<view style="background: rgba(248, 248, 248, .56);padding:30rpx; margin-top: 30rpx;">
			<view class="quesTitle font16 bold hiddenTwoline"><text class="font14 colorOrange focusMargin"
					v-if="quesItem.type==7">@{{quesItem.broUserName}}</text>{{quesItem.title}}</view>
			<view class="flex alignCenter note" v-if="quesItem.taskId>-1" @click.stop="toTaskDetail">
				<image :src="quesItem.taskCover" mode="widthFix"></image>
				<view class="hiddenTwoline font14">{{quesItem.taskTitle}}</view>
			</view>
			<view class="flex alignCenter justConBetween tagBox">
				<view class="tag colorBlue font12">
					<text v-for="(item,index) in quesItem.objectNames" :key="index">{{item}}</text>
				</view>
				<view class="font14 bold color999 reward" v-if="quesItem.bounty>0">悬赏<text
						class="bold mathMagrin" style="color: #FF7101;">{{quesItem.bounty || 0}}</text>元</view>
			</view>
			<view class=""></view>
			<view class="quesCon">
				<view class="richBox" v-if="quesItem.content">
					<view class="color666" v-if="quesItem.isBest!=1">
						<view :class="brand=='apple'?'font14 quesContent':'font14 hiddenTwoline'" v-html="quesItem.content">
							{{quesItem.content}}</view>
						<uni-imgbox :canDel="false" v-if="(quesItem.imgUrl && quesItem.type==5)"
							:imgArr="quesItem.imgUrl.split(',')"></uni-imgbox>
					</view>
				</view>
				<view class="videoBox" v-if="quesItem.videoUrl && quesItem.isBest!=1">
					<view class="font14 flex alignCenter" @click.stop="toAnswerDetail">
						<image src="@/static/image/icons/play.png" mode="widthFix"></image>
						<view class="">视频回答</view>
					</view>
				</view>
				<view v-if="quesItem.isBest==1" class="noWidthBtn font14 colorMain" @click.stop="toBestAnswer"><text
						class="bold font12">查看最佳答案</text></view>
			</view>
		</view>
		<view class="quesOper flex alignCenter justConBetween" v-if="quesItem.type!=5">
			<view class="font12 colorccc"><text class="colorLightOrange bold mathMagrin">{{quesItem.answerTotal}}</text>人回答
			</view>
			<view class="flex alignCenter justConEnd operMain" v-if="quesItem.type!=2">
				<view class="flex alignCenter" @click.stop="quesOper('answer')">
					<image src="@/static/image/icons/edit.png" mode="widthFix"></image>
					<text class="font14 colorLightOrange">回答</text>
				</view>
				<view class="flex alignCenter" @click.stop="quesOper('share')">
					<image src="https://image.alhelp.net/uploads/20231104/db05a877babde8bbcce75893aced0760.png" mode="widthFix"></image>
					<text class="font14 colorLightOrange">邀请回答</text>
				</view>
			</view>
			<view class="font14 bold colorLightOrange" v-if="quesItem.type==2" @click.stop="quesOper('answer')">我也要回答</view>
		</view>
		<view class="quesOper flex alignCenter justConBetween" v-if="quesItem.type==5">
			<view class="flex alignCenter" @click.stop="quesOper('share')">
				<image src="https://image.alhelp.net/uploads/20231104/db05a877babde8bbcce75893aced0760.png" mode="widthFix"></image>
				<text class="font14">转发</text>
			</view>
			<view class="flex alignCenter" @click.stop="quesOper('commend')">
				<image src="@/static/image/icons/edit.png" mode="widthFix"></image>
				<text class="font14">评论<text class="mathMagrin">{{quesItem.commentTotal}}</text></text>
			</view>
			<view class="flex alignCenter" @click.stop="quesOper('like')">
				<image :src="quesItemOne.isLiked?'https://image.alhelp.net/uploads/20231104/c9f5e3a3e5ed54bfb52cb4acaff6245d.png':'https://image.alhelp.net/uploads/20231104/718c395eb3db60582c396acec8a85fc6.png'" mode="widthFix">
				</image>
				<text class="font14">点赞<text class="mathMagrin">{{quesItemOne.likedTotal}}</text></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		focusUser,
		likeOrNot
	} from "@/api/index.js"
	import {
		payBeforeTip,
		navigateLoginPage
	} from "@/utils/common.js"
	export default {
		name: "uni-question",
		props: {
			quesItem: {
				type: Object,
				default () {
					return {}
				}
			},
			canFocus: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			quesItem: {
				handler(newValue, oldValue) {
					this.quesItemOne = newValue
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				isMine: false,
				brand: '',
				quesItemOne: ''
			};
		},
		created() {
			this.brand = uni.getStorageSync('brand')
			this.isMine = (this.quesItem.createUserId == uni.getStorageSync('userId'))
		},
		methods: {
			quesOper(type) {
				if (!uni.getStorageSync('token')) {
					navigateLoginPage()
					return
				}
				if (type == 'answer') {
					let query = {
						id: this.quesItem.id, //this.quesItem.typeId,
						title: this.quesItem.title
					}
					uni.navigateTo({
						url: '/pages/send/answer/answer?query=' + JSON.stringify(query)
					})
					return
				} else if (type == 'share') {
					if (!uni.getStorageSync('token')) {
						navigateLoginPage()
						return
					}
					// inviteType 1提问者邀请；2最佳回答者邀请；3普通用户的提问邀请；4邀请加入小组；5任务打卡邀请
					let inviteType = ''
					if (this.quesItem.createUserId == uni.getStorageSync('userId')) {
						inviteType = 1
					} else if (this.quesItem.bestUserId == uni.getStorageSync('userId')) {
						inviteType = 2
					} else {
						inviteType = 3
					}
					let query = {
						id: this.quesItem.id,
						questionId: this.quesItem.questionId,
						inviteType: inviteType
					}
					uni.navigateTo({
						url: '/pages/school/share/share?query=' + JSON.stringify(query)
					})
					return
				} else if (type == 'commend') {
					uni.navigateTo({
						url: "/pages/send/answer/answerDetail/answerDetail?quesTitle=" + this.quesItem.title + '&id=' + this
							.quesItem.id + '&type=taskNote'
					})
					return
				} else if (type == 'like') {
					// 点赞、取消点赞
					let param = {
						type: 5, //同提问的type一致
						typeId: this.quesItemOne.id,
						isLiked: !this.quesItemOne.isLiked
					}
					likeOrNot(param).then((res) => {
						if (res.code == 100000) {
							this.quesItemOne.isLiked = !this.quesItemOne.isLiked
							if (this.quesItemOne.isLiked) {
								this.quesItemOne.likedTotal = Number(this.quesItemOne.likedTotal) + 1
								return
							} else {
								this.quesItemOne.likedTotal = Number(this.quesItemOne.likedTotal) - 1
								return
							}
						}
					})
				}

			},
			// 进到提问详情定位到改答案位置
			toSeeDetail() {
				let item = {
					id: this.quesItem.id,
					questionId: this.quesItem.questionId
				}
				uni.navigateTo({
					url: `/pages/send/question/questionDetail/questionDetail?item=${JSON.stringify(item)}`
				})
			},
			// 去任务详情
			toTaskDetail() {
				uni.navigateTo({
					url: '/pages/send/task/taskDetail/taskDetail?id=' + this.quesItem.taskId
				})
			},
			// 视频回答详情
			toAnswerDetail() {
				uni.navigateTo({
					url: '/pages/send/answer/answerDetail/answerDetail?id=' + this.quesItem.id + '&quesTitle=' + this.quesItem
						.title
				})
			},
			// 去用户主页
			toHomePage() {
				uni.navigateTo({
					url: '/pages/mine/homePage/homePage?userId=' + this.quesItem.createUserId
				})
			},
			toDetail() {
				if (this.quesItem.type != 5) {
					// 提问详情
					// 为了在返回tabbar页面的时候不刷新数据
					uni.setStorageSync('noFresh', true)
					let item = {
						id: this.quesItem.id,
						questionId: this.quesItem.questionId
					}
					uni.navigateTo({
						url: `/pages/send/question/questionDetail/questionDetail?item=${JSON.stringify(item)}`
					})
					return
				} else {
					// 笔记详情
					// let id=this.quesItem.typeId || this.quesItem.id
					uni.setStorageSync('noFresh', true)
					uni.navigateTo({
						url: "/pages/send/answer/answerDetail/answerDetail?quesTitle=" + this.quesItem.title + '&id=' + this
							.quesItem.id + '&type=taskNote'
					})
				}

			},
			// 查看最佳答案
			toBestAnswer() {
				if (!uni.getStorageSync('token')) {
					navigateLoginPage()
					return
				}
				uni.setStorageSync('noFresh', true)
				//支付一元查看，提问和最佳回答各分一半
				let param = {
					id: this.quesItem.answerId,
					quesTitle: this.quesItem.title,
					isBestBuy: this.quesItem.isBestBuy
				}
				payBeforeTip(param)
			},
			focusClick() {
				if (this.quesItemOne.createUserId == uni.getStorageSync('userId')) {
					uni.showToast({
						title: '亲，这是你自己哦',
						icon: 'none'
					})
					return
				}
				let param = {
					isAdd: !this.quesItemOne.isLikedUser,
					fansUserId: this.quesItemOne.createUserId,
					fansUserName: this.quesItemOne.createUserName,
					fansUserAvatar: this.quesItemOne.createUserAvatar,
				}
				focusUser(param).then((res) => {
					if (res.code == 100000) {
						this.quesItemOne.isLikedUser = !this.quesItemOne.isLikedUser
						let emitObj = {
							type: 'focus',
							userId: this.quesItemOne.createUserId,
							status: this.quesItemOne.isLikedUser
						}
						this.$emit('quesOper', emitObj)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/public.scss";

	.question {
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		margin: 0 0 20rpx;

		.posTag {
			position: absolute;
			top: 0;
			right: 30rpx;
			text-align: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				display: inline-block;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				line-height: 50rpx;
			}
		}

		.userName {
			margin: 0 0 20rpx;
		}

		.quesTitle {
			margin-bottom: 30rpx;
		}
	}

	.questionS {
		box-shadow: 0 0 10rpx 5rpx rgba(0, 0, 0, .1);
	}

	.queHeader {
		.avatar {
			width: 76rpx;
			height: 76rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
			position: relative;
			
			image {
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
			.q-icons{
				width: 28rpx;
				height: 28rpx;
				border-radius: 28rpx 28rpx 8rpx 28rpx;
				background: #797979;
				position: absolute;
				top: 50rpx;
				left: 40rpx;
				text{
					font-size: 24rpx;
					color: #EF8F00;
					margin-left: 5rpx;
				}
			}
			.A-icons{
				width: 28rpx;
				height: 28rpx;
				border-radius: 28rpx 28rpx 8rpx 28rpx;
				background: #797979;
				position: absolute;
				top: 50rpx;
				left: 6rpx;
				text{
					font-size: 24rpx;
					color: #EF8F00;
					margin-left: 6rpx;
				}
			}
			.b-icons{
				position: absolute;
				top: 40rpx;
				left: 40rpx;
				width: 40rpx;
				height: 40rpx;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}

			// 在头像下方的关注样式
			.focus {
				position: absolute;
				bottom: -10rpx;
				left: 15%;
				width: 70%;
				background: $colorred;
				border-radius: 20rpx;
				height: 35rpx;
				line-height: 35rpx;
				text-align: center;
				color: #fff;
				z-index: 10;
			}
		}

		// 与头像水平对齐的关注样式
		.focus {
			background: $colorred;
			color: #fff;
			padding: 8rpx 20rpx;
			border-radius: 40rpx;
			text-align: center;
		}
	}

	.note {
		background: $pageBgColor;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx 0 0;

		.tag {
			background: $colorMain;
			border-radius: 5rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
			flex-shrink: 0;
		}

		image {
			width: 100rpx;
			height: 100rpx;
			margin: 0 10rpx 0 0;
			flex-shrink: 0;
			border-radius: 10rpx;
		}
	}

	.tagBox {
		margin: 30rpx 0 30rpx;

		.tag {
			text {
				display: inline-block;
				margin-right: 30rpx;
			}

			text:last-child {
				margin-right: 0;
			}
		}

		.reward {
			flex-shrink: 0;
		}
	}

	.quesCon {
		.richSelf {
			filter: blur(2px);
			max-height: 100rpx;
		}

		.richBox {
			// max-height: 100rpx;
			overflow: hidden;
			// margin: 0 0 28rpx;
			position: relative;

			// .richSelf{
			// 	filter: blur(2px);
			// }
			.seeDetail {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, .1);
				text-align: center;
				line-height: 100rpx;

				text {
					border-radius: 40rpx;
					background: rgba(0, 0, 0, .3);
					padding: 8rpx 30rpx;
				}
			}

			.quesContent {
				max-height: 80rpx;
			}

			::v-deep .imgBoxShow {
				margin: 10rpx 0 0;
			}
		}

		.noWidthBtn {
			width: 40%;
			padding: 15rpx 0;
			margin: 0 auto 30rpx;
		}
	}

	.audioBox {
		max-height: 400rpx;

		audio {
			width: 100%;
		}

		::v-deep .uni-audio-default {
			width: 100%;
		}
	}

	.videoBox {
		max-height: 400rpx;
		margin-bottom: 20rpx;

		&>view {
			background: $pageBgColor;
			padding: 10rpx;
			box-sizing: border-box;
			border-radius: 6rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 0 10rpx 0 0;
		}

		video {
			width: 100%;
			height: 200rpx;
		}
	}

	.quesOper {
		margin: 28rpx 0 0;

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 8rpx 0 0;
		}

		.operMain {
			&>view {
				margin-left: 60rpx;
			}
		}
	}
</style>